<template>
  <div class="sidebar-container" >
     <ul class="container-ul" >
       <li>
         <div class="list-item" v-for="(item,index) in dataMain" :key="index" >
            <i :class="item.icon" style="font-size:16px" ></i><span>{{item.label}}</span>
         </div>
        </li>
        <li>
          <div class="list-items" >
            <el-tree :data="data" accordion :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div>
        </li>
     </ul>
  </div>
</template>
<script>
import {
  reactive,
  toRefs,
  onMounted
} from "vue";
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: "qy-sidebar",
  setup() {
    // 定义路由
    const router = useRouter()
    const route = useRoute()
    // 定义存储
    const store = useStore()
    // 定义数据
    const state = reactive({
      dataMain:[
        {label:'工作台',icon:'el-icon-s-platform'},
        {label:'收藏',icon:'el-icon-star-off'}
      ],
      data: [
        {
          label: '个人空间',
          children: [
            {pid:0,index:0,label: '基础信息',path:'/error'},
            {pid:0,index:1,label: '简历编写',path:'/personspace/resume'},
            {pid:0,index:2,label: '个人作品',path:'/personspace/works'}
          ]},{
          label: '工作空间',
          children: [
            {pid:1,index:0,label: '事项安排',path:'/jobspace/schedule'},
            {pid:1,index:1,label: '知识库',path:'/error'},
            {pid:1,index:2,label: '日志',path:'/error'},
            {pid:1,index:3,label: '讨论组',path:'/error'},
          ]}, {
          label: '博客专栏',
          children: [
            {pid:2,index:0,label: '首页',path:'/community/home'},
            {pid:2,index:1,label: '热点',path:'/error'},
            {pid:2,index:2,label: '小册',path:'/error'},
            {pid:2,index:3,label: '活动',path:'/error'},
          ]
        },{
          label: '工具库',
          children: [
            {pid:3,index:0,label: '工具导航',path:'/tools/home'},
            {pid:3,index:1,label: '社会服务',path:'/tools/social'},
          ]
        },{
          label: '反馈',
          children: [
            {pid:4,index:0,label: '反馈填写',path:'/other/feedback'},
          ]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
    });
    const handleNodeClick = (data) => {
        if(data.path){
          const navigationIndex = data.index
          const navigation = state.data[data.pid].children
          store.dispatch("app/getNavigation",navigation)
          store.dispatch("app/navigationClick",navigationIndex)
          if(data.path == '/error'){
            router.push({path:data.path,query:{status:'building'}})
          }else{
            router.push({path:data.path})
          }
          
        }
    };
    return {
      ...toRefs(state),
      handleNodeClick
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variable.scss";
.sidebar-container{
  position: fixed;
  left: 0;
  top: 60px;
  width: 256px;
  background-color: $sidebar-bg;
  border-right:1px solid $sidebar-border;
  z-index: 1;
  height: calc(100vh - 60px);
  overflow: hidden;
  padding: 24px 8px;
  .container-ul{
    width: 240px;
  }
  .list-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 24px;
    margin-bottom: 4px;
    color:$sidebar-color;
    cursor: pointer;
    span{
      padding: 6px 16px;
    }
  }
  .list-item:hover{
    background-color: $sidebar-hover;
  }
  .list-items{
    margin-top:30px
  }
}
</style>
<style lang="scss" >
@import "@/styles/variable.scss";
.el-tree{
  background-color:$sidebar-bg;
  font-size: 14px;
  padding-left: 18px;
}
.el-tree-node__content{
  margin-bottom: 12px;
}
.el-tree-node__label{
  margin-left: 16px;
}
</style>